<template>
  <a-row :gutter="[24, 2]" :row-gap="1">
    <a-col :span="24">
      <vue3VideoPlay v-bind="videoPlayOptions" v-if="videoPlayOptions.src" />
    </a-col>

    <!-- <div
    class="arco-upload-picture-card"
    style="cursor: pointer"
    @click="handleClick"
  >
    <div class="arco-upload-picture-card-text">
      <icon-Plus />
    </div>
  </div> -->

    <a-col :span="24">
      <div style="width: 416px">
        <a-row justify="left">
          <a-space>
            <a-upload
              :show-file-list="false"
              v-model:fileList="fileList"
              action="/pc/common/upload"
              @change="handleChange"
              @beforeUpload="handleBeforeUpload"
              accept="video/*"
              ref="uploadRef"
            />
            <a-button @click="handleDel">
              <template #icon>
                <icon-Delete />
              </template>
              删除
            </a-button>
          </a-space>
        </a-row>
      </div>
    </a-col>
  </a-row>
</template>

<script setup>
  import { ref, nextTick, watch, reactive, computed } from 'vue';
  import { Message } from '@arco-design/web-vue';

  const videoPlayOptions = reactive({
    width: '416px', //播放器高度
    height: '234px', //播放器高度
    color: '#409eff', //主题色
    muted: false, //静音
    webFullScreen: false,
    speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
    autoPlay: true, //自动播放
    loop: false, //循环播放
    mirror: false, //镜像画面
    ligthOff: false, //关灯模式
    volume: 0.3, //默认音量大小
    control: true, //是否显示控制器
    // title: '', //视频名称
    // src: 'http://vjs.zencdn.net/v/oceans.mp4', //视频源
    src: computed(() => props.modelValue), //视频源
    // poster: '', //封面
  });

  const uploadRef = ref();
  const handleClick = () => {
    uploadRef.value.$el.querySelector('input').click();
  };
  const handleDel = () => {
    emits('update:modelValue', '');
  };

  const emits = defineEmits(['update:modelValue']);
  const props = defineProps({
    modelValue: {
      type: String,
      default: ``,
    },
  });

  const fileList = ref();
  const loading = ref();

  const handleBeforeUpload = () => {
    loading.value = Message.loading({
      content: '上传中...',
    });
    return true;
  };

  const handleChange = (newFileList, fileItem) => {
    if (fileItem.status === 'done') {
      loading.value.close();
      if (fileItem.response.code === 1) {
        emits('update:modelValue', fileItem.response.data.fullurl);
        Message.success(fileItem.response.msg);
      } else {
        emits('update:modelValue', '');
        Message.warning(fileItem.response.msg);
      }
    }
  };
</script>
